<template>
    <common-select
        v-model:data="state.data"
        :label="state.label"
        :value="state.value"
        :fields="state.columns"
        :tableData="state.table.data"
        :curPage="state.table.currentPage"
        :pageSize="state.table.pageSize"
        :total="state.table.total"
        :border="true"
        clearable
        editable
        @currentChange="currentChange"
        @sizeChange="sizeChange"
        @inputChange="inputChange"
        @blur="blurInput"
        @clear="clear"
        @handleRowClick="handleRowClick"
    ></common-select>
  </template>

  <script setup lang="ts">
  import { useBizSelect } from '../hooks/useBizSelect';
  import CommonSelect from './commonSelect.vue';
  import { getDesignColor } from '/@/api/platform/wms/pickApply';

  const model = defineModel();

  // 监听model改变
  watch(model, (newValue, oldValue) => {
    // console.log('model 值发生变化：', '旧值:', oldValue, '新值:', newValue);
    changeData(newValue)
  }, { deep: true });


  const emit = defineEmits(['change']);
  // 获取props中的参数
  const props = defineProps({
    queryParams: {
      type: Object,
      default: () => {
      }
    },
    pageList: {
      type: Object,
      default: () => {
      }
    },
    value: {
      type: Object,
      default: () => {
      }
    },
    label: {
      type: Object,
      default: () => {
      }
    }
  });
  const { state, inputChange, blurInput, currentChange, sizeChange, clear, handleRowClick,changeData } = useBizSelect({
    model: model,
    pageList: props.pageList || getDesignColor,
    label: props.label || 'text',
    queryParams: props.queryParams || {},
    emit: emit,
    value: props.value || 'value',
    columns: [
      { label: '物料编码', prop: 'value', width: 200 },
      { label: '花色', prop: 'text', width: 200 },
    ]
  });
  </script>

  <style scoped></style>
